<template>
    <div style="height: 60px"></div>
    <header>
        <div class="logo" @click="$router.push('/')">零碎、记忆</div>
        <div class="search" :style="{ width: `${searchWidth}px` }">
            <input
                type="text"
                placeholder="搜索"
                autocomplete="off"
                @focus="searchWidth = 300"
                @blur="searchWidth = 200"
                @keyup.enter="searchHandle"
                v-model="key"
            />
            <img :src="search" alt="" @mousedown="searchHandle($event)" />
        </div>

        <router-link to="/write" class="write" v-if="$store.state.userinfo">
            写文章
        </router-link>
        <router-link to="/tools" class="tools">工具下载</router-link>
        <router-link to="/type" class="tools" v-if="$store.state.userinfo">
            分类管理
        </router-link>

        <div class="user">
            <div
                class="login"
                @click="$router.push('/login')"
                v-if="!$store.state.userinfo"
            >
                登录
            </div>
            <div v-else>
                <el-popover
                    placement="bottom"
                    :width="200"
                    trigger="hover"
                    :show-arrow="false"
                >
                    <template #reference>
                        <div>
                            <span
                                class="iconfont blog-Touxiang"
                                style="
                                    cursor: pointer;
                                    color: rgb(183, 183, 183);
                                    font-size: 30px;
                                "
                            ></span>
                        </div>
                    </template>
                    <div class="user_menu">
                        <router-link to="/personal" class="item-link">
                            {{ $store.state.userinfo.username }}
                        </router-link>

                        <div @click="logout" class="logout">退出登录</div>
                    </div>
                </el-popover>
            </div>
        </div>
    </header>
</template>

<script setup>
import search from '@/assets/search.svg';
import { ref } from 'vue';
import router from '@/router';
import { ElMessage, ElPopover } from 'element-plus';
import 'element-plus/es/components/popover/style/css';
import store from '@/store';
const searchWidth = ref(200);
const key = ref('');
const emit = defineEmits(['search']);
const searchHandle = e => {
    e.preventDefault();
    if (key.value.length > 0) {
        //  发送事件
        router.push({
            path: '/search',
            query: {
                key: key.value,
            },
        });
    } else {
        ElMessage.error('搜索内容不能为空');
    }
};
const logout = () => {
    store.commit('clearUserInfo');
    ElMessage.success('注销成功');
    router.push('/');
};
</script>

<style lang="less" scoped>
header {
    height: 60px;
    padding: 0 50px;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    background-color: #fff;
    .logo {
        font-size: 20px;
        font-weight: bold;
        user-select: none;
        line-height: 60px;
        margin-right: 30%;
        cursor: pointer;
    }
    .write,
    .address,
    .tools {
        margin-right: 30px;
        cursor: pointer;
    }
    .search {
        display: flex;
        align-items: center;
        background-color: #f0f0f0;
        border-radius: 20px;
        padding-right: 15px;
        transition: width 0.35s ease-in-out;
        margin-right: auto;

        input {
            padding: 10px 15px;
            box-sizing: border-box;
            border: none;
            background-color: #f0f0f0;
            outline: none;
            border-radius: 20px;
            width: calc(100% - 20px);
        }
        img {
            width: 20px;
            height: 20px;
            margin-left: 10px;
            cursor: pointer;
        }
    }
    .login {
        cursor: pointer;
    }
    .logout {
        cursor: pointer;
        margin-left: 20px;
        color: red;
    }
}

// 适配手机屏幕
@media screen and (max-width: 768px) {
    header {
        position: fixed;
        background-color: #fff;
        z-index: 9;
        width: 100%;
        top: 0;
        height: auto;
        flex-flow: column;
        .logo {
            margin: 0;
        }
        .search {
            display: none;
        }
        .write,
        .address,
        .tools,
        .user {
            display: none;
        }
    }
}

@media screen and (max-width: 1280px) and (min-width: 768px) {
    header {
        .logo {
            margin-right: 10%;
        }
    }
}
</style>
<style lang="less">
.user_menu {
    margin: -12px;
    .item-link {
        display: block;
        color: #606266;
        text-decoration: none;
        padding: 12px;
        cursor: pointer;
        border-bottom: 1px solid #eee;
        &:hover {
            background-color: #eee;
        }
    }
    div {
        padding: 12px;
        cursor: pointer;
        &:hover {
            background-color: #eee;
        }
    }
}
</style>
